<template>
    <view class="container" :style="themeColor">
        <header-bar :config="config"></header-bar>
        <view class="main" v-if="takeDeliveryInfo.TakeDeliveryName">
            <view class="card-group">
                <card-group-cell label="门店logo" :value="easyGetUserImgUrl(takeDeliveryInfo.ImageUrl[0])"
                    :isImgView="true" :isShowRight="false"></card-group-cell>
                <card-group-cell ref="takeDeliveryName" label="门店名称" :value="takeDeliveryInfo.TakeDeliveryName"
                    :isShowRight="false"></card-group-cell>
            </view>

            <view class="card-group">
                <card-group-cell ref="RegimentHeadName" label="团长姓名" :value="takeDeliveryInfo.RegimentHeadName"
                    :isShowRight="false"></card-group-cell>
                <card-group-cell ref="ContactTel" label="联系方式" :value="takeDeliveryInfo.ContactTel"
                    :isShowRight="false"></card-group-cell>
                <!-- <card-group-cell ref="OpeningHours" label="营业时间" :value="takeDeliveryInfo.OpeningHours" :isShowRight="false"></card-group-cell> -->
                <card-group-cell ref="AddressDetail" label="联系地址" :value="takeDeliveryInfo.AddressDetail"
                    :isShowRight="false"></card-group-cell>
                <card-group-cell ref="ContactAddress" label="详细地址" :value="takeDeliveryInfo.ContactAddress"
                    :isShowRight="false"></card-group-cell>
            </view>
        </view>
        <view class="main mescroll-empty" v-else>
            <image src="/static/img/empty.png"></image>
            <view>用户未申请提货点</view>
        </view>
    </view>
</template>

<script>
import { GetMemberDetail } from "@/service/api/member.js"
// 提货点信息
import { GetMyApplyTakeDelivery } from "@/service/api/takeDelivery.js"
import cardGroupCell from "@/components/common/cell/card-group-cell.vue"
import storage from "@/uni-sub-base/utils/storage.js"
import appVersion from "@/uni-sub-base/module/version/app-version.vue"
export default {
    components: {
        cardGroupCell,
        appVersion,
    },
    data() {
        return {
            config: {
                title: "提货点信息",
                back: true,
                color: ["#333333"],
                centerSlot: true,
                barPlaceholder: true,
                backgroundColor: [1, "#ffffff"],
            },
            userInfo: null,
            takeDeliveryInfo: {},
        }
    },
    mounted() { },
    onLoad() {
        this.info()
    },
    methods: {
        info() {
            GetMemberDetail().then((res) => {
                this.userInfo = res.Data
            })
            GetMyApplyTakeDelivery().then((res) => {
                this.takeDeliveryInfo = res.Data
                this.takeDeliveryInfo.ImageUrl = res.Data.ImageUrl.split(",")
            })
        },
    },
}
</script>

<style lang="scss">
.container {
    .main {
        padding: $app-page-padding;
    }

    .card-group-cell .image {
        width: 90rpx;
        height: 90rpx;
        border-radius: 90rpx;
    }

    .card-group-cell {
        .uni-icons {
            color: #ccc;
        }

        text,
        .label,
        .input {
            font-size: 28rpx;
        }
    }
}

.card-group {
    margin-bottom: 20rpx;
    background: $color-white;
    border-radius: $border-radius-10;
}

.btn {
    margin-top: 40rpx;
    height: 88rpx;
    font-size: 36rpx;
}

.bottom-pop {
    background: $color-white;
    padding: $app-page-padding;
    border-radius: $border-radius-30 $border-radius-30 0 0;

    .title {
        margin-top: 20rpx;
        display: flex;
        justify-content: center;
        margin-bottom: 20rpx;
        font-size: $font-size-28;
        font-weight: 600;
    }

    .actions {
        display: flex;
        flex-direction: row;
        margin-bottom: 48rpx;

        .btn {
            width: 220rpx;
        }
    }
}

.mescroll-empty {
    box-sizing: border-box;
    width: 100%;
    padding: 80px 25px;
    text-align: center;

    image {
        width: 140px !important;
        height: 98px !important;
        display: block;
        margin: 0 auto;
    }

    view {
        font-size: 26rpx;
        color: gray;
    }

    .btn {
        width: 180rpx;
        margin: 0 auto;
        margin-top: 30rpx;
    }
}
</style>
